<template>
	<view class="my_address">
		<view class="ad_box">
			<view class="ad_item" v-for="(item, index) in addData" :key=index :class="{'active': active == index}" @click="choseAdd(item)">
				<view class="item">
					<view class="left">
						<view class="num">
							{{ index + 1}}
						</view>
					</view>
					<view class="middle">
						<view class="user_info">
							<view class="user_name">
								{{ item.name }}
							</view>
							<view class="user_phone">
								{{ item.phone }}
							</view>
						</view>
						<view class="address">
							
							<view class="ad_info">
								<text class="default" v-if="item.default == 1">默认</text>
								{{ item.nativenative }} {{ item.address }}
							</view>
						</view>
					</view>
					<view class="right"  :class="{'activetxt': active == index}">
						选定 <van-icon name="success" />
					</view>
				</view>
			</view>
		</view>
		<!-- 添加按钮 -->
		<view class="add_btn">
			<button type="primary" @click="addInfo">添加地址</button>
		</view> 
		
		
	</view>
</template>

<script>
	// import uniPopup from "@/components/uni-popup/uni-popup.vue"
	
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	export default {
	    components: {simpleAddress},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				dialogShow: false,
				active: "",
				user_info: {},
				diaData: {
					title: ""
				},
				addData: [
					
				]
			}
		},
		computed:{
			actAddress() {
				return this.$store.state.defaultAddress ? this.$store.state.defaultAddress : ""
			},
			token() {
				return this.$store.state.token
			},
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			// 获取地址列表
			async getAddress() {
				let res = await this.$Request("POST","/Index/address", { token: this.token })
				
				let self = this
				this.addData = res.data.data
				console.log(this.addData);
				if(this.actAddress.phone) {
					this.addData.forEach((el, index) => {
						if(el.phone == this.actAddress.phone) {
							this.active = index
						}
					})
				} else {
					this.addData.forEach((el, index) => {
						if(el.tacitly == 1) {
							this.active = index
						}
					})
				}
				
			},
			// 选择地址
			choseAdd( item ) {
				this.$store.commit("getDefaultAddress", item)
				uni.navigateBack({
					
				})
			},
			// 定位
			getLocaltion() {
				let self = this
				uni.getLocation({
					type:"wgs84",
					success(res) {
						//console.log(res);
						self.map = res
						uni.openLocation({
							latitude:res.latitude,
							longitude: res.longitude,
							success(ret) {
								uni.chooseLocation({
									success( val ) {
										//console.log(val);
										self.userInfo.nativenative = val.name
									}
								})
							}
						})
					}
				})
			} ,
			// open pop
			open( item ) {
				this.user_info = item
				uni.setNavigationBarTitle({
					title:"编辑地址"
				})
				uni.navigateTo({
					url:`/pages/addedit/addedit?type=1`,
				})
			},
			// 添加地址
			addInfo() {
				this.user_info = {}
				uni.setNavigationBarTitle({
					title:"添加地址"
				})
				uni.navigateTo({
					url:`/pages/addedit/addedit?type=2`,
				})
			},
			// 关闭dialog
			close() {
				this.dialogShow = false
			},
			openAddres() {
			   this.$refs.simpleAddress.open();
			},
			chose(e) {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				console.log(e);
			    // this.pickerText = JSON.stringify(e)
			},
			// 检测手机号
			isPhone() {
				let  reg = /^1[356789]\d{9}$/
				let res = reg.test(this.user_info.phone)
				if(!res) {
					uni.showToast({
						title:"手机格式不正确",
						icon: "loading"
					})
					this.user_info.phone = ""
				}
			},
			// 设置默认地址
			async setDefault() {
				let res = await this.$Request("POST","/Index/tacitly",{id: 4})
				console.log(res);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		border: 1px solid #007AFF;
		color: #007AFF;
		
	}
	.activetxt {
		font-weight: bold;
		color: #007AFF;
	}
	.my_address {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.ad_box {
			width: 100%;
			box-sizing: border-box;
			border-radius: 30rpx;
			
			.ad_item {
				width: 100%;
				margin: 30rpx 0;
				padding: 20rpx 10rpx;
				border-radius: 30rpx;
				box-sizing: border-box;
				.item {
					width: 100%;
					display: flex;
					align-items: center;
					.left {
						width: 80rpx;
						height: 80rpx;
						background-color: #f2f2f2;
						border-radius: 50%;
						text-align: center;
						line-height: 80rpx;
						color: orange;
						
					}
					.middle {
						font-size: 20rpx;
						margin-left: 20rpx;
						padding-right: 30rpx;
						flex: 1;
						.user_info {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							padding-left: 10rpx;
							.user_phone {
								margin-left: 20rpx;
							}
							.user_name {
								font-size: 30rpx;
							}
						}
						.address {
							display: flex;
							width: 100%;
							
							.ad_info {
								margin-left: 10rpx;
								.default {
									background-color: green;
									padding: 0 10rpx;
									color: #fff;
									border-radius: 10rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
					.right {
						width: 100rpx;
						text-align: center;
						font-size: 20rpx;
						line-height: 40rpx;
						// color: #999;
						border-left: 1px solid #999;
					}
				}
			}
		}
		.ad_dia {
			width: 600rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin: 0 auto;
			.dia_title {
				width: 100%;
				text-align: center;
				line-height: 60rpx;
				padding-top: 30rpx;
			}
			.dia_form {
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				.form_box {
					width: 100%;
					display: flex;
					align-items: center;
					margin: 20rpx 0;
					input {
						margin-left: 20rpx;
						border-bottom: 1px solid #333;
						flex: 1;
					}
					label {
						width: 150rpx;
						text-align: left;
					}
					.quyu {
						
						flex: 1;
						padding-left: 20rpx;
						.area {
							border-bottom: 1px solid #333;
							height: 48rpx;
						}
						.color {
							color: #777;
						}
					}
					button {
						width: 200rpx;
					}
				}
			}
		}
		.dialog {
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
		}
	}
</style>
